<template>
  <div id="detail">
    <div class="total_grade">
      <h1 class="total_grade_title">总战绩</h1>
      <p class="total_grade_conten">
        <span>总局数</span>
        <span>{{totalNum}}</span>
      </p>
      <div class="total_chart">
        <div class="chart_pie" ref="pie">
        </div>
        <div class="chart_desc">
          <span>胜率</span>
          <span>{{winRate}}</span>
        </div>
      </div>
    </div>

    <ul>
      <li v-for="item in totalData" :key="item.gameType">
        <div class="grade">
          <h1>{{item.gamename}}</h1>
          <ul class="table">
            <li>对局数</li>
            <li>胜</li>
            <li>平</li>
            <li>负</li>
            <li>胜率</li>
            <li>最大得分</li>
          </ul>
          <ul class="table table_grade">
            <li v-for="item in [item.totalCount, item.win, item.draw, item.lose, item.winRate, item.maxScore]" :key="item">{{item}}</li>
          </ul>
          <router-link class="detail" :to="{name: 'gradeDetail', params: {gameType: item.gameType}}" v-if="item.totalCount"></router-link>
        </div>
      </li>
    </ul>
    <div class="line" ref="line"></div>
  </div>
</template>


<script>
// import echarts from "echarts";
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
// 引入提示框和标题组件
require("echarts/lib/component/title");
import axios from "axios";
import utils from "../../scripts/utils";
export default {
  data() {
    return {
      totalNum: "",
      winRate: "",
      totalWin: "",
      totalData: [],
      lineData: []
    };
  },
  mounted() {
    axios.post("/api/personalrecord").then(res => {
      let resData = res.data;
      this.totalData = resData.summary;
      this.lineData = resData.dailyScore;
      this.totalNum = resData.totalRecord.totalCount;
      this.totalwin = resData.totalRecord.win;
      this.winRate = resData.totalRecord.winRate;
    });
  },
  updated() {
    // 绘制图表

    let pieData = [
      {
        value: this.totalwin,
        itemStyle: {
          normal: {
            color: "#9cffa1"
          }
        }
      },
      {
        value: this.totalNum - this.totalwin
      }
    ];
    let lineChart = echarts.init(this.$refs.line);
    let lineTitleFont = utils.getCurrentPx(0.3);
    lineChart.setOption({
      title: {
        text: "每日累计得分",
        textStyle: {
          color: "#fff",
          fontSize: lineTitleFont
        },
        left: "center"
      },
      xAxis: {
        type: "category",
        position: "top",
        axisLine: {
          show: false
        },
        axisLabel: {
          color: "#fff",
          interval: 1
        },
        axisTick: {
          show: false,
          onGap: false
        },
        data: [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20,
          21,
          22,
          23,
          24,
          25,
          26,
          27,
          28,
          29,
          30
        ]
      },
      yAxis: {
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dotted"
          }
        }
      },
      series: [
        {
          name: "分数",
          type: "line",
          smooth: true,
          showSymbol: false,
          lineStyle: {
            normal: {
              color: "#fff",
              width: 1
            }
          },
          areaStyle: {
            normal: {
              color: "#4185ae"
            }
          },
          data: this.lineData
        }
      ]
    });

    //饼图
    let pieChart = echarts.init(this.$refs.pie);
    // 绘制图表
    pieChart.setOption({
      series: [
        {
          name: "总战绩",
          radius: ["55%", "70%"],
          avoidLabelOverlap: false,
          clockwise: false,
          itemStyle: {
            normal: {
              color: "#1a486b"
            }
          },
          type: "pie",
          data: pieData,
          hoverAnimation: false,
          label: {
            normal: {
              show: false,
              position: "center"
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: "30",
                fontWeight: "bold"
              }
            }
          }
        }
      ]
    });
    window.addEventListener("resize", function() {
      lineChart.resize();
      pieChart.resize();
    });
  }
};
</script>



<style scoped>
#detail {
  background-size: 100% 100%;
  color: #fff;
  padding: 0.3rem 0.14rem 0;
  text-align: center;
}

.total_grade,
.grade {
  background: url("../images/title_bg.png") center top no-repeat;
  background-color: #001523;
  background-size: 2.27rem 0.4rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 0.2rem #1c5d86;
}

.total_grade {
  position: relative;
}

.total_grade_title {
  font-size: 0.3rem;
}

.total_grade_conten {
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  flex-direction: column;
  font-size: 0.24rem;
  margin-top: 0.34rem;
  width: 3.32rem;
}

.total_grade_conten span:nth-of-type(2) {
  color: #9cffa1;
  margin-top: 0.2rem;
  margin-bottom: 0.6rem;
}

.total_chart {
  position: absolute;
  top: 0;
  right: 0;
  height: 2.16rem;
  width: 3rem;
}

.chart_pie {
  height: 100%;
  width: 100%;
}

.chart_desc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}

.chart_desc span:nth-of-type(2) {
  color: #9cffa1;
}

.table {
  display: flex;
}

.table li {
  border: 2px solid #062d49;
  border-right-width: 0;
  flex-basis: 0;
  flex-grow: 1;
  padding: 0.2rem 0;
}

.table li:first-child {
  border-left-width: 0;
}

.table_grade li {
  border-top-width: 0;
}

.grade {
  margin-top: 0.22rem;
  position: relative;
}

.grade h1 {
  font-size: 0.3rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

.detail {
  background: url("../images/more_bg.png") no-repeat;
  background-size: cover;
  height: 0.4rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 0.84rem;
}

.line {
  height: 5rem;
  width: 100%;
  margin-top: 0.4rem;
}
</style>
